<template>
  <view class="bg-white" style="width: 100%; min-height: 100vh;">
    <view class="flex align-center" style="width: 100%; height: 260upx; padding: 0 20upx; border-bottom: 2upx solid #F8F8F8;" v-for="(item, index) in shop_cart_list" :key="index">
      <view @click="handleChangeRadio(item)">
        <image :src="item.checked ? selected_icon : no_selected_icon" style="width: 34upx; height: 34upx;"></image>
      </view>
      <view style="width: 43%;">
        <image src="/static/image/kecheng.png@1280w_1l_2o_100sh@2x.png" style="width: 260upx; height: 180upx; border-radius: 10upx; margin: 0 20upx;"></image>
      </view>
      <view class="flex flex-direction" style="width: 50%;">
        <view class="text-hidden" style="width: 300upx;font-size: 30upx; font-weight: bold; margin-bottom: 10upx;">
          设计半朵云艺术创意程刷卡大家和福克斯的计划
        </view>
        <view style="font-size: 26upx; color: #999999; margin-bottom: 30upx;">全面资料学习，掌握学习大法</view>
        <view class="flex align-center justify-between">
          <view style="font-size: 30upx; color: #E52718; font-weight: bold;">¥200</view>
          <view style="font-size: 24upx; color: #C6C6C6;">可密码支付</view>
        </view>
      </view>
    </view>
    <view style="width: 100%; height: 95upx;"></view>
    <view class="flex justify-between" style="width: 100%; height: 96upx; border-top: 2upx solid #F8F8F8; padding: 0 40upx; background-color: white; position:fixed; bottom: 0; z-index: 999;">
      <view class="flex align-center" @click="handleChangeAllSelect">
        <image :src="all_checked ? selected_icon : no_selected_icon" style="width: 32upx; height: 32upx;"></image>
        <view style="font-size: 28upx; color: #666666; margin-left: 12upx;">全选</view>
      </view>
      <view class="flex align-center">
        <view style="font-size: 28upx; color: #333333;">合计：</view>
        <view style="font-size: 32upx; color: #E52718; margin: 0 34upx;">¥288.8</view>
        <view class="flex justify-center align-center" style="width: 180upx; height: 70upx; background-color: #E52718; color: white; font-size: 26upx; border-radius: 40upx;">
          结算
        </view>
<!--        <view class="flex justify-center align-center" style="width: 180upx; height: 70upx; background-color: #D8D8D8; color: white; font-size: 26upx; border-radius: 40upx;">-->
<!--          结算-->
<!--        </view>-->
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      selected_icon: '/static/icon/detail/xuanzhong-3@2x.png', //选中图片
      no_selected_icon: '/static/icon/detail/xuanzhong-3_1@2x.png', //未选中
      shop_cart_list:[
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
      ],
      all_checked: false, //全选
      checkbox: [{
        value: 'A',
        checked: false
      }, {
        value: 'B',
        checked: false
      }, {
        value: 'C',
        checked: false
      }],
    }
  },
  methods: {
    //切换选项
    handleChangeRadio(item){
      item.checked = !item.checked;
    },
    handleChangeAllSelect(){
      this.all_checked = !this.all_checked;
      if(this.all_checked){
        this.shop_cart_list.forEach(item=>{
          item.checked = true;
        })
      }else {
        this.shop_cart_list.forEach(item=>{
          item.checked = false;
        })
      }
    },
  },
  //导航栏右侧删除按钮
  onNavigationBarButtonTap(e) {
    let find = this.shop_cart_list.find(x => x.checked == true);
    if(find){
      uni.showModal({
        title: '提示',
        content: '确定删除已勾选的商品吗？',
        success: (res)=> {
          if (res.confirm) {
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>


